import { Component, OnInit, ElementRef, Renderer2, Input, AfterContentInit } from '@angular/core';
import { DocumentWrapper, WindowWrapper } from '../shared/services';

@Component({
  selector: 'el-loading',
  templateUrl: './loading.component.html'
})
export class LoadingComponent implements OnInit {
  private el: any;
  private renderer: any;
  private document: any;
  private window: any;
  @Input() text: string = '';
  @Input() lock: boolean = false;
  @Input('custom-class') customClass: string = '';
  @Input('full-screen') fullScreen: boolean = false;
  @Input('el-loading-top') elLoadingTop: string = '50%';
  @Input() cacheElement!: HTMLElement;
  @Input() cacheOverflow: string = '';
  private visible:boolean = false;
  // @Input() showLoading: boolean = false;
  @Input('el-loading') set showLoading(val: boolean) {
    this.visible = val;
    if (!this.cacheElement)
        return;
    this.cacheElement.innerHTML = this.makeHtml();
  }
 
  
  constructor(el: ElementRef, renderer: Renderer2, document: DocumentWrapper, window: WindowWrapper) {
    this.el = el;
    this.renderer = renderer;
    this.document = document;
    this.window = window;
  }



  ngOnInit(): void {
    if (this.lock) {
      this.cacheOverflow = this.window.getComputedStyle(this.document.body).overflow;
    }
    
    this.cacheElement = this.renderer.createElement('div');
    this.cacheElement.innerHTML = this.makeHtml();
    var /** @type {?} */ parentElement = this.fullScreen ? this.document.body : this.el.nativeElement;
    if (!this.fullScreen) {
      this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
    }
    this.renderer.appendChild(parentElement, this.cacheElement);
  }


  toggleLock(status: boolean) {
    if (status === void 0) { status = false; }
    if (!this.lock)
      return;
    var /** @type {?} */ nextValue = status ? 'hidden' : this.cacheOverflow;
    this.renderer.setStyle(this.document.body, 'overflow', nextValue);
  }

  makeHtml() {
    console.log( this.visible,'EEEEEEEEEEE');
    this.lock && this.toggleLock(this.visible);
    return "\n      <div class=\"el-loading-mask " + this.customClass + " " + (this.fullScreen ? ' is-fullscreen' : '') + "\"\n        style=\"display: " + (this.visible ? 'block' : 'none') + "\">\n        <div class=\"el-loading-spinner\" style=\"top: " + this.elLoadingTop + "\">\n          <svg class=\"circular\" viewBox=\"25 25 50 50\">\n            <circle class=\"path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\"/>\n          </svg>\n          <p class=\"el-loading-text\" style=\"display: " + (this.text ? 'block' : 'none') + "\">\n            " + this.text + "\n          </p>\n        </div>\n      </div>\n    ";

  }
}
